<template>
  <div class="ordel">
    <div class="big"></div>

    <div class="caidan" v-for="(item, index) in str" :key="index">
      <span class="ti"> {{ item.ti }} </span><span class="you">已完成</span>
      <div class="tu">
        <div class="tu1">
          <img :src="item.img" alt="" />
        </div>
        <!-- <div class="tu2">
          <img :src="item.img" alt="" />
        </div> -->
        <div class="jiage">{{ item.jiage }}</div>
      </div>
      <div class="zai">{{ item.zai }}</div>
    </div>
  </div>
</template>

<script>
var img1 =
  "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F34391042%2F3a4a164a2c5b408fa4a0bfb9c6e2a9dc.jpg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvMzQzOTEwNDIvM2E0YTE2NGEyYzViNDA4ZmE0YTBiZmI5YzZlMmE5ZGMuanBn%2Fsign%2Fedacde3c1d4e5b0326c8bd23d29af3b6.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669471253&t=64686a23866244ece0cd8c1c10b16cf0";
var img3 =
  "https://img1.baidu.com/it/u=2019788126,718340011&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=459";
var img2 =
  "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinakd20201114ac%2F352%2Fw723h429%2F20201114%2F54a5-kcunqze8937157.png&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669471405&t=f9d717e9ccf31266d68fabbb0dcf6544";
var img4 =
  "https://img1.baidu.com/it/u=2756431362,406977903&fm=253&fmt=auto&app=138&f=JPG?w=737&h=492";
export default {
  data() {
    return {
      cuuoon: 0,
      str: [
        {
          ti: "纯手工饺子（高新一路店）",
          img: img1,
          jiage: "￥11.29",
        },
        {
          ti: "巧媳妇麻食（南窑国际店）",
          img: img3,
          jiage: "￥19.31",
        },
        {
          ti: "食尚麻辣拌（昆明路店）",
          img: img2,
          jiage: "￥38.89",
        },
        {
          ti: "盖浇饭（科技园店）",
          img: img4,
          jiage: "￥48.89",
        },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.big {
  display: flex;
}
.big .biao {
  margin: 30px 10px 10px;
}
.big .act {
  font-weight: bold;
  font-size: 16px;
}
.caidan {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  background: antiquewhite;
  margin: 5px 0px;
  border-radius: 20px;
}
.caidan .tu {
  display: flex;
  margin: 3px 0px;
}
.caidan .tu .tu1 img {
  width: 80px;
  height: 60px;
  border-radius: 10px;
  margin-top: 10px;
}
// .caidan .tu .tu2 img {
//   width: 80px;
//   height: 60px;
//   border-radius: 10px;
// }
.caidan .you {
  position: absolute;
  right: 10px;
  font-size: 17px;
}
.caidan .jiage {
  position: absolute;
  right: 15px;
  margin-top: 20px;
  font-size: 16px;
  font-weight: bold;
}
// .caidan .zai {
//   width: 75px;
//   height: 24px;
//   background-color: rgb(62, 145, 240);
//   border-radius: 10px;
//   text-align: center;
//   line-height: 24px;
//   position: absolute;
//   right: 5px;
//   top: 164px;
// }
.caidan .ti {
  font-size: 18px;
  font-weight: bold;
}
</style>